컴패션 클론코딩(개인)

배포주소: https://compassion-clone.web.app/

깃허브 주소: https://github.com/jbinyim/compassion-clone

📅 작업기간

2024-07-11 ~ 2024-08-12

📍 주요기술

react
typescript
react-query

🔦 상세기술

기존 컴패션 사이트를 클론 코딩한 사이트입니다.
react-router-dom을 사용하여 다양한 페이지로의 라우팅을 설정했습니다.
styled-components를 이용하여 반응형, 색상 등을 변수로 선언하여 사용했습니다.
recoil을 이용하여 전역에서 상태 관리를 하고 모달창을 만들었습니다.
react-youtube를 이용하여 영상을 재생하도록 구현했습니다.
react-slick을 이용하여 다양한 슬라이드를 구현해 보았습니다.
react-responsive을 이용하여 조금더 자연스러운 반응형을 구현하였습니다.
react-range를 이용하여 사용자 친화적인 인터페이스를 구현했습니다.

📕 개발이야기

js 클론코딩을 통해 많은 것을 배우고 한 단계 더욱 올라갔다는 느낌을 받고 react 클론코딩을 하게되었습니다. 프로젝트 목표는 기능까지 최대한 구현해보자라는 생각으로 시작했습니다.